.customPasswordToggler {
    &.password-container {
        position: relative;

        .password-input {
            &:not([type="password"])[placeholder] { text-overflow:ellipsis }
            &:-webkit-autofill {  -webkit-text-fill-color: $text !important }
            &:-webkit-autofill ~ .togglePassword-btn-toggle { color: $text }
        }

        .password-input[type="text"] { padding-right: 30px }
        .password-input[type="password"] {
            padding: 9px 30px 8px 0px;
            text-indent: 20px;
        }

        .togglePassword-btn-toggle {
            position: absolute;
            top: 0px;
            right: 0px;
            border: 1px solid transparent;
            padding: 0px 10px;
            background: transparent;
            line-height: 35px; // For the view password icon
            font-size: .8rem;
            text-transform: uppercase;
            cursor: pointer
        }
    }
}

.password-container:not(.customPasswordToggler) {
    .password-input[type="text"], .password-input[type="password"] { padding-right: 0 }
}

body:not(.appConfigBody-is-mac) {
    .customPasswordToggler.password-container {

        .togglePassword-btn-toggle:not(.togglePassword-btn-display) {
            .togglePassword-icon-toPassword { display: none }
        }
        .togglePassword-btn-display .togglePassword-icon-toText {  display: none }

    }
}

/*
    Custom code for MacOS as Dead keys are broken with an input
    type password on this OS, for ALL browsers. ლ(ಠ益ಠლ
    The issue exists for many years, but as we're a few people
    using Dead keys, no fix is available yet
    ¯\_(ツ)_/¯
 */
.appConfigBody-is-mac {
    .password-input:not(.password-input-mac) ~ .togglePassword-btn-toggle .togglePassword-icon-toText,
    .password-input-mac ~ .togglePassword-btn-toggle .togglePassword-icon-toPassword {
        display: none !important
    }

    .password-input:not(.password-input-mac) ~ .togglePassword-btn-toggle .togglePassword-icon-toPassword {
        display: inline-block !important
    }

    /*
        It works only if you're on Webkit based browser
        it's the native behavior.
     */
    .password-input-mac {
        font-family: 'text-security-disc', Arial, 'Helvetica Neue', Helvetica, sans-serif;
        -webkit-text-security: disc;
    }

    .password-input-mac::placeholder {
       font-family: Arial, 'Helvetica Neue', Helvetica, sans-serif;
    }
}
